<template>
  <div class="main">
    <span>这个页面的水印是去不掉的,不信你可以试试</span>
  </div>
</template>

<script>

import { defineComponent, onMounted, onBeforeUnmount } from 'vue'
import { canvasWatermark } from '../lib/canvas-watermark'

import { useStore } from 'vuex'

export default defineComponent({

  name: 'modules-manage.home2',

  setup () {
    const store = useStore()
    onMounted(() => {
      const phone = store.state.userInfo.phone || ''
      const content = (store.state.userInfo.name || '') + ' ' + phone.substring(Math.min(7, phone.length))
      if (content) {
        const unmountWatermark = canvasWatermark(document.body, { content })
        onBeforeUnmount(() => {
          unmountWatermark()
        })
      }
    })
    return {}
  }
})

</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 32px;
  }
}
</style>
